<!--paying 出票中 -->
<template>
  <view class="paying" v-if="!flag">
    <view class="payingBox">
      <image
        class="icon_paying"
        src="https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/loding.gif"
        alt=""
      />
      <view class="mt20 fc8">{{ loadText }}</view>
      <view v-if="cardOrderId" class="fs24 mt20 fc8 content"
        >请耐心等待，请勿关闭退出或返回上一页
      </view>
      <view v-if="filmOrderId" class="fs24 mt20 fc8 content">
        预计在扣款后15分钟内完成出票，请务必留意购票 短信提醒，如未收到可在<span
          class="fc-yellow"
          >影票订单</span
        >中查看订单状态。观影高峰期或网络不佳时，可能会出票缓慢或延迟，请勿关闭、退出或重复支付。
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'paying',
    data() {
      return {
        filmOrderId: '',
        goodsOrderId: '',
        mallOrderId: '',
        foodOrderId: '',
        nowTime: '',
        route: null,
        flag: false,
        orderStatus: '',
        doLoad: true,
        whiteUrl: [
          '/pagesOrder/order/detail',
          '/pagesOrder/order/detail',
          '/pagesOrder/payError/index',
          '/pagesOrder/order/mallBuyDetail',
          '/pagesOrder/card/rechargeSuccess'
        ]
      }
    },
    // watch: {
    //   orderStatus(val) {
    //     console.log(val, '监听器--------------------------')
    //     if (['3', '4', '5'].includes(val)) {
    //       console.log('我进来了---------------------------------')
    //       setTimeout(() => {
    //         this.flag = true
    //         console.log(this.flag, 'flag-------------------')
    //       }, 200)
    //     }
    //   }
    // },
    // #ifdef H5
    beforeRouteLeave(to, from, next) {
      const toPath = to.path
      this.whiteUrl.includes(toPath) ? next() : next(false)
    },
    // #endif
    onLoad(options) {
      this.query = options
      this.route = this.$tools.getCurrentPage()
      console.log('this.route', this.route)
      // #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO
      this.$tools.enable(
        '返回可能会导致出票异常，返回后可在个人中心查看订单信息，请确认订单成功或失败后再进行操作，请勿重复下单！'
      )
      // #endif
    },
    onShow() {
      this.init()
    },
    onUnload() {
      // #ifdef  MP-ALIPAY
      this.doLoad = false
      // #endif
      // #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO
      this.$tools.disable()
      // #endif
    },
    computed: {
      loadText() {
        if (this.filmOrderId) {
          return '出票中...'
        }
        if (this.cardOrderId) {
          return '充值中...'
        }
        if (this.foodOrderId) {
          return '正在点单，请不要返回、切换或者关闭页面'
        }

        return ''
      }
    },
    methods: {
      // 处理后退
      backEvent() {
        // const pageObj = this.$tools.getCurrentPage()
        // console.log(this.route, this.query)
      },
      // 初始化方法
      init() {
        // const isCancel = this.handlePayCancel()
        // if (isCancel) {
        //   return
        // }
        // this.routerPush()
        this.nowTime = +new Date()
        const query = this.query
        this.filmOrderId = query.filmOrderId || ''
        this.goodsOrderId = query.goodsOrderId || ''
        this.mallOrderId = query.mallOrderId || ''
        this.foodOrderId = query.foodOrderId || ''
        this.cardOrderId = query.cardOrderId || ''
        if (this.filmOrderId) {
          uni.setNavigationBarTitle({ title: '出票中' })
        } else {
          uni.setNavigationBarTitle({ title: '支付中' })
        }

        if (this.filmOrderId) {
          console.log('轮训film订单')
          this.getOrderStatus()
        } else if (this.goodsOrderId) {
          console.log('轮训goods订单')
          this.getGoodsStatus()
        } else if (this.mallOrderId) {
          console.log('轮训mall订单')
          this.getMallOrderStatus()
        } else if (this.foodOrderId) {
          console.log('轮训food订单')
          this.getFoodOrderStatus()
        } else if (this.cardOrderId) {
          console.log('轮训card订单')
          this.getCardOrderStatus()
        }
      },
      getOrderStatus() {
        if (
          this.route.cuttentRoute !== 'pagesOrder/paying/index' ||
          !this.doLoad
        ) {
          return
        }
        uni.$api.orderFilm
          .getOrderStatus({ orderId: this.filmOrderId })
          .then((res) => {
            const data = res
            this.orderStatus = data.orderStatus
            console.log('getOrderStatus', res)
            if (['4', '5'].includes(this.orderStatus)) {
              // this.handleUm('ticket', '1')
              this.$tools.navigateTo(
                '/pagesOrder/order/detail',
                {
                  type: 'film',
                  pay: 1,
                  orderId: data.filmOrderId || data.orderId
                },
                'reLaunch'
              )
            } else if (['3'].includes(this.orderStatus)) {
              // this.handleUm('ticket')
              this.$tools.navigateTo(
                '/pagesOrder/payError/index',
                {},
                'reLaunch'
              )
            } else {
              setTimeout(() => {
                this.getOrderStatus()
              }, 1000)
            }
          })
          .catch(() => {
            console.log('接口报错的轮训')
            setTimeout(() => {
              this.getOrderStatus()
            }, 1000)
          })
      },

      getGoodsStatus() {
        if (
          this.route.cuttentRoute !== 'pagesOrder/paying/index' ||
          !this.doLoad
        ) {
          return
        }
        uni.$api.goods
          .getGoodsStatus({ orderId: this.goodsOrderId })
          .then((res) => {
            const data = res
            this.orderStatus = data.orderStatus
            console.log('getGoodsStatus', res, this.flag)
            if (['4'].includes(this.orderStatus)) {
              // this.handleUm('goods', '1')
              this.$tools.navigateTo(
                '/pagesOrder/order/detail',
                {
                  type: 'mall',
                  pay: 1,
                  GoodsOrderId: data.goodsOrderId || data.orderId
                },
                'reLaunch'
              )
              // this.$router.push(
              //   `/orderDetail?pay=1&GoodsOrderId=${this.goodsOrderId}`
              // )
            } else if (['5'].includes(this.orderStatus)) {
              // this.handleUm('goods')
              this.$tools.navigateTo(
                '/pagesOrder/payError/index',
                {},
                'reLaunch'
              )
              // this.$router.push(`/payError`)
            } else {
              setTimeout(() => {
                this.getGoodsStatus()
              }, 1000)
            }
          })
          .catch((err) => {
            console.log(err, '接口错误')
            // this.handleUm('goods')
            this.$tools.navigateTo('/pagesOrder/payError/index', {}, 'reLaunch')
            // this.$router.push(`/payError`)
          })
      },

      getMallOrderStatus() {
        if (
          this.route.cuttentRoute !== 'pagesOrder/paying/index' ||
          !this.doLoad
        ) {
          return
        }
        uni.$api.mall
          .getOrderStatus({ orderId: this.mallOrderId })
          .then((res) => {
            const data = res
            this.orderStatus = data.orderStatus
            console.log('getmallOrderStatus', res)
            if (['4'].includes(this.orderStatus)) {
              // this.handleUm('mall', '1')
              this.$tools.navigateTo(
                '/pagesOrder/order/detail',
                {
                  type: 'mall',
                  pay: 1,
                  orderId: data.mallOrderId || data.orderId
                },
                'reLaunch'
              )
            } else if (['5'].includes(this.orderStatus)) {
              // this.handleUm('mall')
              this.$tools.navigateTo(
                '/pagesOrder/payError/index',
                {},
                'reLaunch'
              )
            } else {
              setTimeout(() => {
                this.getMallOrderStatus()
              }, 1000)
            }
          })
          .catch((err) => {
            console.log(err, '接口错误')
            // this.handleUm('mall')
            this.$tools.navigateTo('/pagesOrder/payError/index', {}, 'reLaunch')
          })
      },
      getFoodOrderStatus() {
        if (
          this.route.cuttentRoute !== 'pagesOrder/paying/index' ||
          !this.doLoad
        ) {
          return
        }
        uni.$api.orderFood
          .getOrderInfo({ orderId: this.foodOrderId })
          .then((res) => {
            const data = res
            this.orderStatus = data.orderStatus
            console.log('getmallOrderStatus', res)
            if (['4'].includes(this.orderStatus)) {
              // this.handleUm('mall', '1')
              this.$tools.navigateTo(
                '/pagesOrder/order/mallBuyDetail',
                {
                  orderId: this.foodOrderId
                },
                'reLaunch'
              )
            } else if (['5'].includes(this.orderStatus)) {
              // this.handleUm('mall')
              this.$tools.navigateTo(
                '/pagesOrder/payError/index',
                {},
                'reLaunch'
              )
            } else {
              setTimeout(() => {
                this.getFoodOrderStatus()
              }, 1000)
            }
          })
          .catch((err) => {
            console.log(err, '接口错误')
            // this.handleUm('mall')
            this.$tools.navigateTo('/pagesOrder/payError/index', {}, 'reLaunch')
          })
      },
      getCardOrderStatus() {
        if (
          this.route.cuttentRoute !== 'pagesOrder/paying/index' ||
          !this.doLoad
        ) {
          return
        }
        uni.$api.memberCard
          .getOrderInfo({ orderId: this.cardOrderId })
          .then((res) => {
            const data = res
            this.orderStatus = data.orderStatus
            if (['4'].includes(this.orderStatus)) {
              // this.handleUm('mall', '1')
              this.$tools.navigateTo(
                '/pagesOrder/card/rechargeSuccess',
                {
                  orderId: this.cardOrderId,
                  success: 'true'
                },
                'reLaunch'
              )
            } else if (['5'].includes(this.orderStatus)) {
              // this.handleUm('mall')
              this.$tools.navigateTo(
                '/pagesOrder/card/rechargeSuccess',
                { orderId: this.cardOrderId },
                'reLaunch'
              )
            } else {
              setTimeout(() => {
                this.getCardOrderStatus()
              }, 1000)
            }
          })
          .catch((err) => {
            console.log(err, '接口错误')
            // this.handleUm('mall')
            this.$tools.navigateTo(
              '/pagesOrder/card/rechargeSuccess',
              { orderId: this.cardOrderId },
              'reLaunch'
            )
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .paying {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .payingBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 170rpx 78rpx 0;
    box-sizing: border-box;
    // font-size: 30rpx;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // width: 100%;
    // padding: 0 30rpx;
    // box-sizing: border-box;
    // transform: translate(-50%, -50%);
    .content {
      line-height: 40rpx;
      padding-top: 80rpx;
    }
  }

  .icon_paying {
    width: 192rpx;
    height: 140rpx;
  }
</style>
